<!-- 筛选查询系统扩展 -->
<div class="filter-container mt-4 mb-6">
    <!-- 高级筛选折叠面板 -->
    <div class="accordion" id="advancedFilters">
        <div class="accordion-item border rounded-lg">
            <h2 class="accordion-header" id="filterHeader">
                <button class="accordion-button bg-white shadow-none d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#filterCollapse" aria-expanded="true" aria-controls="filterCollapse">
                    <span class="fw-semibold">高级筛选</span>
                    <i class="fas fa-sliders-h text-primary"></i>
                </button>
            </h2>
            <div id="filterCollapse" class="accordion-collapse collapse show" aria-labelledby="filterHeader" data-bs-parent="#advancedFilters">
                <div class="accordion-body p-4">
                    <div class="row g-4">
                        <!-- 分类筛选 -->
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-medium mb-2">礼物分类</label>
                            <select class="form-select rounded-lg border-gray-300" id="categoryFilter">
                                <option value="all">所有分类</option>
                                <option value="electronics">电子产品</option>
                                <option value="fashion">时尚服饰</option>
                                <option value="home">家居用品</option>
                                <option value="beauty">美妆个护</option>
                                <option value="sports">运动户外</option>
                                <option value="experiences">体验服务</option>
                            </select>
                        </div>
                        
                        <!-- 价格范围筛选 -->
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-medium mb-2">价格范围</label>
                            <select class="form-select rounded-lg border-gray-300" id="priceFilter">
                                <option value="all">所有价格</option>
                                <option value="0-50">¥0 - ¥50</option>
                                <option value="50-200">¥50 - ¥200</option>
                                <option value="200-500">¥200 - ¥500</option>
                                <option value="500-1000">¥500 - ¥1000</option>
                                <option value="1000+">¥1000以上</option>
                            </select>
                        </div>
                        
                        <!-- 发布时间筛选 -->
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-medium mb-2">发布时间</label>
                            <select class="form-select rounded-lg border-gray-300" id="timeFilter">
                                <option value="all">不限时间</option>
                                <option value="today">今天</option>
                                <option value="week">本周</option>
                                <option value="month">本月</option>
                                <option value="quarter">近三个月</option>
                                <option value="year">今年</option>
                            </select>
                        </div>
                        
                        <!-- 热门程度筛选 -->
                        <div class="col-md-3 col-sm-6">
                            <label class="form-label fw-medium mb-2">热门程度</label>
                            <select class="form-select rounded-lg border-gray-300" id="popularityFilter">
                                <option value="default">默认排序</option>
                                <option value="mostliked">最多喜欢</option>
                                <option value="mostcommented">最多评论</option>
                                <option value="mostviewed">最多浏览</option>
                                <option value="newest">最新发布</option>
                            </select>
                        </div>
                        
                        <!-- 标签筛选 -->
                        <div class="col-md-12">
                            <label class="form-label fw-medium mb-2">热门标签</label>
                            <div class="d-flex flex-wrap gap-2" id="tagFilters">
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter active" data-tag="all">全部</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="birthday">生日礼物</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="anniversary">周年纪念</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="handmade">手工制作</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="luxury">高端礼品</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="practical">实用礼物</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="experience">体验类</span>
                                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer tag-filter" data-tag="creative">创意礼品</span>
                            </div>
                        </div>
                        
                        <!-- 筛选操作按钮 -->
                        <div class="col-12 d-flex justify-content-between align-items-center pt-2">
                            <div class="text-sm text-gray-500" id="filterResultsCount">
                                显示 <span class="fw-medium">24</span> 个愿望
                            </div>
                            <div>
                                <button class="btn btn-outline-secondary me-2" id="resetFilters">
                                    <i class="fas fa-sync-alt me-1"></i> 重置筛选
                                </button>
                                <button class="btn btn-primary" id="applyFilters">
                                    <i class="fas fa-filter me-1"></i> 应用筛选
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 快速筛选标签 -->
    <div class="mt-4">
        <div class="d-flex flex-wrap align-items-center gap-3">
            <span class="text-sm fw-medium text-gray-600">快速筛选:</span>
            <div class="d-flex flex-wrap gap-2">
                <button class="btn btn-sm btn-light border rounded-full px-4 py-1 d-flex align-items-center gap-1 filter-pill active" data-filter="all">
                    <i class="fas fa-th-large"></i> 全部愿望
                </button>
                <button class="btn btn-sm btn-light border rounded-full px-4 py-1 d-flex align-items-center gap-1 filter-pill" data-filter="friends">
                    <i class="fas fa-user-friends"></i> 好友愿望
                </button>
                <button class="btn btn-sm btn-light border rounded-full px-4 py-1 d-flex align-items-center gap-1 filter-pill" data-filter="trending">
                    <i class="fas fa-fire"></i> 热门推荐
                </button>
                <button class="btn btn-sm btn-light border rounded-full px-4 py-1 d-flex align-items-center gap-1 filter-pill" data-filter="unfulfilled">
                    <i class="far fa-heart"></i> 未实现
                </button>
                <button class="btn btn-sm btn-light border rounded-full px-4 py-1 d-flex align-items-center gap-1 filter-pill" data-filter="mine">
                    <i class="fas fa-user"></i> 我的愿望
                </button>
            </div>
        </div>
    </div>
    
    <!-- 筛选结果展示区 -->
    <div class="mt-6">
        <!-- 筛选状态标签 -->
        <div class="d-flex flex-wrap gap-2 mb-4" id="activeFilters">
            <span class="text-sm text-gray-600">已选筛选条件:</span>
            <!-- 动态生成的活跃筛选标签将显示在这里 -->
        </div>
        
        <!-- 结果列表将在这里显示 -->
    </div>
</div>

<script>
// 筛选功能JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // 获取筛选元素
    const categoryFilter = document.getElementById('categoryFilter');
    const priceFilter = document.getElementById('priceFilter');
    const timeFilter = document.getElementById('timeFilter');
    const popularityFilter = document.getElementById('popularityFilter');
    const tagFilters = document.querySelectorAll('.tag-filter');
    const filterPills = document.querySelectorAll('.filter-pill');
    const applyFiltersBtn = document.getElementById('applyFilters');
    const resetFiltersBtn = document.getElementById('resetFilters');
    const activeFiltersContainer = document.getElementById('activeFilters');
    const filterResultsCount = document.getElementById('filterResultsCount');
    
    // 存储当前筛选条件
    let currentFilters = {
        category: 'all',
        price: 'all',
        time: 'all',
        popularity: 'default',
        tag: 'all',
        quickFilter: 'all'
    };
    
    // 标签筛选点击事件
    tagFilters.forEach(tag => {
        tag.addEventListener('click', function() {
            // 移除所有标签的活跃状态
            tagFilters.forEach(t => t.classList.remove('active', 'bg-primary', 'text-white'));
            tagFilters.forEach(t => t.classList.add('bg-primary-light', 'text-primary'));
            
            // 设置当前标签为活跃
            this.classList.add('active', 'bg-primary', 'text-white');
            this.classList.remove('bg-primary-light', 'text-primary');
            
            // 更新筛选条件
            currentFilters.tag = this.getAttribute('data-tag');
        });
    });
    
    // 快速筛选点击事件
    filterPills.forEach(pill => {
        pill.addEventListener('click', function() {
            // 移除所有快速筛选的活跃状态
            filterPills.forEach(p => p.classList.remove('active', 'bg-primary', 'text-white'));
            filterPills.forEach(p => p.classList.add('btn-light'));
            
            // 设置当前快速筛选为活跃
            this.classList.add('active', 'bg-primary', 'text-white');
            this.classList.remove('btn-light');
            
            // 更新筛选条件
            currentFilters.quickFilter = this.getAttribute('data-filter');
            
            // 快速筛选立即应用
            applyFilters();
        });
    });
    
    // 应用筛选按钮点击事件
    applyFiltersBtn.addEventListener('click', function() {
        // 更新筛选条件
        currentFilters.category = categoryFilter.value;
        currentFilters.price = priceFilter.value;
        currentFilters.time = timeFilter.value;
        currentFilters.popularity = popularityFilter.value;
        
        // 应用筛选
        applyFilters();
    });
    
    // 重置筛选按钮点击事件
    resetFiltersBtn.addEventListener('click', function() {
        // 重置所有筛选条件
        categoryFilter.value = 'all';
        priceFilter.value = 'all';
        timeFilter.value = 'all';
        popularityFilter.value = 'default';
        
        // 重置标签筛选
        tagFilters.forEach(t => t.classList.remove('active', 'bg-primary', 'text-white'));
        tagFilters.forEach(t => t.classList.add('bg-primary-light', 'text-primary'));
        document.querySelector('.tag-filter[data-tag="all"]').classList.add('active', 'bg-primary', 'text-white');
        document.querySelector('.tag-filter[data-tag="all"]').classList.remove('bg-primary-light', 'text-primary');
        
        // 重置快速筛选
        filterPills.forEach(p => p.classList.remove('active', 'bg-primary', 'text-white'));
        filterPills.forEach(p => p.classList.add('btn-light'));
        document.querySelector('.filter-pill[data-filter="all"]').classList.add('active', 'bg-primary', 'text-white');
        document.querySelector('.filter-pill[data-filter="all"]').classList.remove('btn-light');
        
        // 重置当前筛选条件
        currentFilters = {
            category: 'all',
            price: 'all',
            time: 'all',
            popularity: 'default',
            tag: 'all',
            quickFilter: 'all'
        };
        
        // 应用筛选
        applyFilters();
    });
    
    // 应用筛选函数
    function applyFilters() {
        // 显示加载状态
        showLoadingState();
        
        // 模拟API请求延迟
        setTimeout(() => {
            // 更新活跃筛选标签
            updateActiveFilters();
            
            // 模拟筛选结果计数
            updateResultsCount();
            
            // 根据筛选条件更新愿望列表
            updateWishList();
            
            // 隐藏加载状态
            hideLoadingState();
        }, 800);
    }
    
    // 更新活跃筛选标签
    function updateActiveFilters() {
        // 清空现有活跃筛选标签
        activeFiltersContainer.innerHTML = '<span class="text-sm text-gray-600">已选筛选条件:</span>';
        
        // 生成活跃筛选标签
        const filterLabels = {
            category: getCategoryLabel(currentFilters.category),
            price: getPriceLabel(currentFilters.price),
            time: getTimeLabel(currentFilters.time),
            popularity: getPopularityLabel(currentFilters.popularity),
            tag: getTagLabel(currentFilters.tag),
            quickFilter: getQuickFilterLabel(currentFilters.quickFilter)
        };
        
        // 添加活跃筛选标签
        Object.keys(filterLabels).forEach(key => {
            if (filterLabels[key] && filterLabels[key] !== '全部' && filterLabels[key] !== '默认排序') {
                const filterBadge = document.createElement('span');
                filterBadge.className = 'badge bg-primary/10 text-primary px-3 py-1 d-flex align-items-center gap-1';
                filterBadge.innerHTML = `${filterLabels[key]} <button class="btn-close btn-close-sm text-primary" data-filter="${key}"></button>`;
                
                // 添加删除筛选条件事件
                filterBadge.querySelector('button').addEventListener('click', function(e) {
                    e.stopPropagation();
                    const filterType = this.getAttribute('data-filter');
                    resetFilterByType(filterType);
                    applyFilters();
                });
                
                activeFiltersContainer.appendChild(filterBadge);
            }
        });
        
        // 如果没有筛选条件，显示提示
        if (activeFiltersContainer.children.length <= 1) {
            activeFiltersContainer.innerHTML += '<span class="text-sm text-gray-500 ms-2">未应用任何筛选条件</span>';
        }
    }
    
    // 按类型重置筛选条件
    function resetFilterByType(filterType) {
        switch(filterType) {
            case 'category':
                currentFilters.category = 'all';
                categoryFilter.value = 'all';
                break;
            case 'price':
                currentFilters.price = 'all';
                priceFilter.value = 'all';
                break;
            case 'time':
                currentFilters.time = 'all';
                timeFilter.value = 'all';
                break;
            case 'popularity':
                currentFilters.popularity = 'default';
                popularityFilter.value = 'default';
                break;
            case 'tag':
                currentFilters.tag = 'all';
                tagFilters.forEach(t => t.classList.remove('active', 'bg-primary', 'text-white'));
                tagFilters.forEach(t => t.classList.add('bg-primary-light', 'text-primary'));
                document.querySelector('.tag-filter[data-tag="all"]').classList.add('active', 'bg-primary', 'text-white');
                document.querySelector('.tag-filter[data-tag="all"]').classList.remove('bg-primary-light', 'text-primary');
                break;
            case 'quickFilter':
                currentFilters.quickFilter = 'all';
                filterPills.forEach(p => p.classList.remove('active', 'bg-primary', 'text-white'));
                filterPills.forEach(p => p.classList.add('btn-light'));
                document.querySelector('.filter-pill[data-filter="all"]').classList.add('active', 'bg-primary', 'text-white');
                document.querySelector('.filter-pill[data-filter="all"]').classList.remove('btn-light');
                break;
        }
    }
    
    // 更新结果计数
    function updateResultsCount() {
        // 模拟根据筛选条件计算结果数量
        const baseCount = 24;
        const randomFactor = Math.random() * 0.5 + 0.5; // 0.5到1之间的随机数
        const resultCount = Math.round(baseCount * randomFactor);
        
        filterResultsCount.innerHTML = `显示 <span class="fw-medium">${resultCount}</span> 个愿望`;
    }
    
    // 更新愿望列表（实际应用中会根据筛选条件从服务器获取数据）
    function updateWishList() {
        // 获取愿望容器
        const wishContainer = document.getElementById('wish-container');
        
        // 在实际应用中，这里会根据currentFilters从服务器请求数据
        // 这里简单模拟筛选效果，添加一个动画效果表示内容已更新
        wishContainer.classList.add('opacity-50');
        
        setTimeout(() => {
            wishContainer.classList.remove('opacity-50');
            
            // 可以在这里根据筛选条件重新生成或更新愿望列表
            console.log('筛选条件已应用:', currentFilters);
        }, 300);
    }
    
    // 显示加载状态
    function showLoadingState() {
        const loadMoreBtn = document.getElementById('load-more');
        if (loadMoreBtn) {
            const spinner = loadMoreBtn.querySelector('.spinner');
            if (spinner) {
                spinner.style.display = 'inline-block';
            }
            loadMoreBtn.disabled = true;
        }
    }
    
    // 隐藏加载状态
    function hideLoadingState() {
        const loadMoreBtn = document.getElementById('load-more');
        if (loadMoreBtn) {
            const spinner = loadMoreBtn.querySelector('.spinner');
            if (spinner) {
                spinner.style.display = 'none';
            }
            loadMoreBtn.disabled = false;
        }
    }
    
    // 辅助函数：获取筛选条件的显示文本
    function getCategoryLabel(value) {
        const labels = {
            'all': '所有分类',
            'electronics': '电子产品',
            'fashion': '时尚服饰',
            'home': '家居用品',
            'beauty': '美妆个护',
            'sports': '运动户外',
            'experiences': '体验服务'
        };
        return labels[value] || value;
    }
    
    function getPriceLabel(value) {
        const labels = {
            'all': '所有价格',
            '0-50': '¥0 - ¥50',
            '50-200': '¥50 - ¥200',
            '200-500': '¥200 - ¥500',
            '500-1000': '¥500 - ¥1000',
            '1000+': '¥1000以上'
        };
        return labels[value] || value;
    }
    
    function getTimeLabel(value) {
        const labels = {
            'all': '不限时间',
            'today': '今天',
            'week': '本周',
            'month': '本月',
            'quarter': '近三个月',
            'year': '今年'
        };
        return labels[value] || value;
    }
    
    function getPopularityLabel(value) {
        const labels = {
            'default': '默认排序',
            'mostliked': '最多喜欢',
            'mostcommented': '最多评论',
            'mostviewed': '最多浏览',
            'newest': '最新发布'
        };
        return labels[value] || value;
    }
    
    function getTagLabel(value) {
        const labels = {
            'all': '全部',
            'birthday': '生日礼物',
            'anniversary': '周年纪念',
            'handmade': '手工制作',
            'luxury': '高端礼品',
            'practical': '实用礼物',
            'experience': '体验类',
            'creative': '创意礼品'
        };
        return labels[value] || value;
    }
    
    function getQuickFilterLabel(value) {
        const labels = {
            'all': '全部愿望',
            'friends': '好友愿望',
            'trending': '热门推荐',
            'unfulfilled': '未实现',
            'mine': '我的愿望'
        };
        return labels[value] || value;
    }
});
</script>

